import React from 'react';
import {observer} from 'mobx-react';
import styled from 'styled-components';
import {useStores} from '../libs/useStores';
import {Form, Input, Button, message} from 'antd';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import {useHistory} from 'react-router-dom';

import {RuleObject} from 'antd/lib/form';
import {Store, StoreValue} from 'antd/lib/form/interface';


const Layout = {
    wrapperCol: {offset: 2, span: 20},
};

const ButtonLayout = {
    wrapperCol: {offset: 10, span: 4},
};

const StyledFormWrapper = styled.section`
    height: 400px;
    width: 400px;
    margin: 100px auto;
    padding: 30px 0;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.3);
`;

const StyledH1 = styled.h1`
    text-align: center;
    margin: 0 auto 50px auto;
    color: #F57C01;
`;

const StyledInput = styled(Input)`
    &:focus,
    &:hover{
        border-color: #F57C01;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #F57C0160;
    }
`;

const StyledPrimaryButton = styled(Button)`
    border-radius: 6px;
    background: #F57C01;
    border: #FEA043;
    &:hover,
    &:active,
    &:focus {
        background: #FEA043;
    }
`;

const Login: React.FC = observer(() => {

    const history = useHistory();

    const {AuthStore} = useStores();

    const onFinish = (values: Store) => {
        console.log('登录中...');
        AuthStore.setUsername(values.username);
        AuthStore.setPassword(values.password);
        AuthStore.login()
            .then(() => {
                console.log('登录成功，跳转到首页');
                message.success('登录成功');
                history.push('/home');
            })
            .catch(() => {
                console.log('登录失败，什么都不做');
            });
    };

    const validateUsername = (rule: RuleObject, value: StoreValue) => {
        if (/\W/.test(value)) {
            return Promise.reject('不能出现字母数字下划线以外的字符');
        }
        if (value.length < 3) {
            return Promise.reject('用户名长度不能小于3');
        }
        if (value.length > 10) {
            return Promise.reject('用户名长度不能大于10');
        }
        return Promise.resolve();
    };

    return (
        <StyledFormWrapper>
            <StyledH1>用户登录</StyledH1>
            <Form
                {...Layout}
                name="normal_login"
                className="login-form"
                initialValues={{remember: true}}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {required: true, message: '请输入用户名！'},
                        {validator: validateUsername}
                    ]}
                >
                    <StyledInput prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {required: true, message: '请输入密码'},
                        {min: 4, message: '最少4个字符'},
                        {max: 12, message: '最多12个字符'}
                    ]}
                >
                    <StyledInput
                        prefix={<LockOutlined className="site-form-item-icon"/>}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>

                <Form.Item {...ButtonLayout}>
                    <StyledPrimaryButton type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </StyledPrimaryButton>
                </Form.Item>
            </Form>
        </StyledFormWrapper>
    );
});

export default Login;